<template>
  <!-- 非常重要 路由设置后此标签决定了路由能否正常切换 -->
<!--  <router-view></router-view>-->
  <div class="container">
    <img class="app-logo" src="../assets/app_logo.png" alt="">
    <van-form
        @submit="onSubmit"
    >
      <van-field
          v-model="username"
          name="account"
          label=""
          placeholder="请输入账号"
          clearable
          autocomplete
          :rules="[{ required: true, message: '请输入账号' }]"
      />
      <van-field
          v-model="password"
          :type="pwdFileType"
          name="password"
          label=""
          placeholder="请输入密码"
          :right-icon="rightIcon"
          clearable
          autocomplete
          :rules="[{ required: false, message: '请输入密码' }]"
          @click-right-icon="rightIconClicked"
          @focus="inputTextValueChanged"
          @input="inputTextValueChanged"
          @blur="endEditing"
      />
      <div class="login-btn-bk">
        <van-button  class="loginBtn" round block type="primary" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {util} from "@/utils/util";
import {klLoginUrl} from "@/utils/urlConfig";
import {Http} from "@/utils/apiManager";
import {showToast} from "vant";
// router注册后 可以直接引入使用该对象
import router from "@/router";
import {appUser} from "@/model/appUser";
export default {
  name: "AppLogin",
  components:{

  },
  props:{

  },
  data(){
    return {
      // 账号
      username:'',
      // 密码
      password:'',
      password1:'',
      password2:'',
      password3:'',
      password4:'',
      // 密码框类型
      pwdFileType:'tel',
      rightIcon:'',

      navBarStyle:'nav-bar',
    }
  },
  created() {
  },
  mounted() {

    this.navBarStyle = 'position:sticky;left:0;right:0;top:0;'
    window.scrollTo(0,0)

    // 监听页面往上滑动距离方法
    window.onscroll = () => {
      let a = document.documentElement.scrollTop
      // console.log(document.documentElement.scrollTop);
      setTimeout(()=> {
        this.navBarStyle = 'position:absolute;left:0;right:0;display:none;top:' + a + 'px;'
        setTimeout(()=> {
          this.navBarStyle = 'position:sticky;left:0;right:0;top:' + a + 'px;'
        }, 10)
      }, 100)
    }
  },
  methods:{
    // 输入框内容变更
    inputTextValueChanged() {
      const { password, pwdFileType } = this
      if (password.length == 0) {
        this.rightIcon = ''
        return
      }
      if (pwdFileType == 'tel') {
        this.rightIcon = 'eye'
      } else  {
        this.rightIcon = 'closed-eye'
      }
    },

    // 密码安全显示切换
    rightIconClicked() {
      console.log('右侧按钮点击')
      if (this.pwdFileType == 'tel') {
        this.pwdFileType = 'password'
      } else  {
        this.pwdFileType = 'tel'
      }
    },

    // 提交事件 有必填项未填时 不会走到这里
    onSubmit: function (e) {
      console.log('提交', e)

      // 先从缓存中取设备号 - 登录成功过已经本地记住了16位的
      let uuid = util.getLocalStorage('uuid')

      if (uuid.length == 0) {
        uuid = util.getUuid()
        // 将字符串中的-全部替换为空字符
        uuid = uuid.replace(/-/g, '')

        // md5后 - 32位
        uuid = util.md5Str(uuid)

        // 取16位的md5
        uuid = uuid.substring(8, 24)
      }
      console.log('uuid', uuid)

      const param = {
        loginName: e.account,
        password: util.md5Str(e.password),
        imei: uuid,
      }

      Http.post(klLoginUrl, Http.appModuleType.moduleTypeOA, param).then(res => {
        console.log('oa登录成功', res)
        const {code, msg, data} = res
        if (code == 0) {
          showToast('登录成功')
          data['oaAccount'] = e.account
          data['password'] = e.password
          data['uuid'] = uuid
          this.loginSuccessWithInfo(data)
        } else {
          showToast(msg)
        }
      }).then(err => {
        console.log('oa登录失败', err)
      })
    },

    /**
     * 登录成功 存储用户信息 并界面跳转
     * @param info
     */
    loginSuccessWithInfo(info) {

      util.setLocalStorage('uuid', info.uuid)

      const userInfo = {
        oaAccount: info.oaAccount,
        oaPwd: info.password,
        uuid: info.uuid,
        userId: info.userId,
        userName: info.userName,
        // oa层级id
        deptId: info.deptId,
        // 层级名称 eg:公司-测试分公司-测试1区
        departName: info.departName,
        // 层级对应的职位名称
        positionName: info.positionName,
        // oa用户头像
        headImg: info.headImg,
        xlLoginName: info.xlLoginName,
        xlUserId: info.xlUserId,
        oaLoginToken: info.oaLoginToken,
      }

      // 存储用户信息 当退出登录时记得清空存储
      util.setLocalStorage('userInfo', userInfo)

      // 登录成功 给window赋值一个全局对象
      let tempUser = new appUser(userInfo)
      console.log('login当前登录用户信息', tempUser)
      window.loginUser = tempUser

      // 登录成功 同步更新请求头
      Http.reqConfig.formHeaders["oa_login_token"] = info.oaLoginToken

      // 进入首页
      console.log('router', router)

      // 可以直接通过path直接push eg:router.push('路由名称')
      // 可以带查询参数push 对象字段分别为path 和 query(为对象) http://localhost:8081/main?userId=123
      // const userName = "张三"
      // router.push({ path: "main", query:{ 'userId': '123', 'userName':encodeURI(userName) }} );

      router.push('main')
    },

    onClickLeft() {

    },

    endEditing() {
      // alert('1')
      // this.navBarStyle = 'position:sticky;left:0;right:0;top:0;display:none;'
      // setTimeout(()=> {
      //   window.scrollTo(0, 0)
      //   setTimeout(()=> {
      //     this.navBarStyle = 'position:sticky;left:0;right:0;top:0;'
      //   }, 0)
      // }, 100)
    }
  },
}
</script>

<style scoped>
body, .container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.app-logo {
  width: 75px;
  height: 75px;
  margin: 20px auto 60px;
  display: block;
}

.van-cell {
  padding: 15px 15px;
  color: #131313;
  font-size: 15px;
}

.login-btn-bk {
  margin: 44px  30px 0;
}

.loginBtn {
  font-size: 18px;
  background-color: #2478FF;
}
</style>
